<template>
	<view>
		<view class="wrap">
			<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
			<!-- <u-navbar back-icon-color="#fff" :border-bottom="false" height="44" :background="{ background: 'none' }">

				<view class="title">
					分类
				</view>
			</u-navbar> -->

			<scroll-view scroll-x="true" class="data-list" @scrolltolower="scrolltolower">
				<view v-for="(item, index) in atlasList" @click="changeTab(item.atlasId,item.atlasName)" :key="index"
					class="data-list-item" :class="{active:item.atlasId==atlasId}">
					<view class="imgCont">
						<view class="bgs">

							<view class="image">
								<image class="image1" src="https://tb.wuyouzhuan888.com/applet-icon/fengmian.png">
								</image>
							</view>
							<view class="mask">
								<view class="num">
									{{item.count}}+
								</view>
								<image class="narrow" src="https://tb.wuyouzhuan888.com/applet-icon/sel.png" mode="">
								</image>
							</view>
						</view>
						<image class="decoration" src="https://tb.wuyouzhuan888.com/applet-icon/decoration.png" mode="">
						</image>
					</view>
					<view class="name">
						{{item.atlasName}}
					</view>

				</view>
			</scroll-view>
			<view class="waterfall">
				<waterfall :list="resourcesList" :atlasName="atlasName" :atlasId="atlasId" :taskId="taskId"
					:callbackId="callbackId" :movId="movId" :creatorId="creatorId" :accountId="accountId"
					:collectionId="collectionId" :urlId="urlId" />
				<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30"
					margin-top="10" margin-bottom="10" />
				<u-empty v-if="isEmpty" color="#A897D9" text="暂无数据"
					src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>
			</view>
		</view>
		<view @click="toTop" v-if="scrollTop>60">
			<xuanfu></xuanfu>
		</view>
	</view>

</template>
<script>
	import waterfall from '@/components/waterfall4';
	import xuanfu from '@/components/xuanfu.vue'
	export default {
		components: {
			waterfall,
			xuanfu
		},
		data() {
			return {
				// 任务ID
				taskId: 0,
				// 模版ID
				movId: 0,
				// 创作者ID
				creatorId: 0,
				// 账号ID
				accountId: 0,
				// 图集ID
				atlasId: 0,
				collectionId: 0,
				urlId: 0,
				// 图片ID
				imgIds: '',
				// 初始图集ID
				initAtlasId: 0,
				// 图集名称
				atlasName: '',
				// 图集列表
				atlasList: [],
				// 图集总数
				atlasTotal: 0,
				// 图集页数
				atlasPage: 1,
				// 图集每页条数
				atlasSize: 7,
				// 图集列表
				resourcesList: [],
				// 图集总数
				resourcesTotal: 0,
				// 页数
				resourcesPage: 1,
				// 每页条数
				resourcesSize: 15,
				// 加载状态
				status: "loadmore",
				// 数据为空
				isEmpty: false,
				callbackId: 0,
				categoryId: 0
			};
		},
		onLoad(options) {
			// 任务ID
			this.taskId = options.taskId ?? 0;
			// 模版ID
			this.movId = options.movId ?? 0;
			// 创作者ID
			this.creatorId = options.creatorId ?? 0;
			// 账号ID
			this.accountId = options.accountId ?? 0;
			this.collectionId = options.collectionId ?? 0;
			this.urlId = options.urlId ?? 0;
			// 场景
			this.callbackId = options.callbackId ?? 0
			//分类
			this.categoryId = options.categoryId ?? 0
			// 图集ID
			this.atlasId = options.atlasId;
			// 初始图集ID
			this.initAtlasId = options.atlasId;
			// 资源ID
			this.imgIds = options.imgIds ?? '';
			// 图集名称
			this.atlasName = options.atlasName
			// token存在
			if (uni.getStorageSync('token')) {
				// 获取图集列表
				this.getAtlasList()
				// 获取资源列表
				this.getResourcesList(this.atlasId)
			} else {
				// 校验token
				this.checkToken();
			}

		},
		// 触底加载
		onReachBottom() {
			let allTotal = this.resourcesPage * this.resourcesSize;
			if (this.resourcesTotal > 0) {
				if (allTotal < this.resourcesTotal) {
					//当前条数小于总条数 则增加请求页数
					//加载中状态
					this.status = "loading";
					this.resourcesPage++;

					this.getResourcesList(this.atlasId);
				} else {
					//加载完状态
					this.status = "noMore";
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			toTop() {
				if (this.scrollTop > 60) {
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
			},
			// 校验token
			checkToken() {
				let checkTokenTimer = setInterval(res => {
					// token 存在
					if (uni.getStorageSync('token')) {
						// 清除计时器
						clearInterval(checkTokenTimer)
						// 获取图集列表
						this.getAtlasList()
						// 获取资源列表
						this.getResourcesList(this.atlasId)
					}
				}, 500)
			},
			// 图集列表滚动条右滑
			scrolltolower() {
				let allTotal = this.atlasPage * this.atlasSize;
				if (allTotal < this.atlasTotal) {
					//当前条数小于总条数 则增加请求页数
					this.atlasPage++;
					this.getAtlasList();
				}
			},
			// 获取图集列表
			getAtlasList() {
				this.$u.api.atlas.getList({
					atlasId: this.atlasId,
					page: this.atlasPage,
					size: this.atlasSize,
					creatorId: this.creatorId,
					accountId: this.accountId,
					collectionId: this.collectionId,
					urlId: this.urlId,
					movId: this.movId,
					taskId: this.taskId,
					callbackId: this.callbackId,
					categoryId: this.categoryId
				}).then(res => {
					if (res.code != 200) {
						uni.showModal({
							title: '图集加载失败',
							content: '请刷新后重试或重启小程序',
							showCancel: false,
							confirmText: '知道了'
						})
						return;
					}
					// 图集列表总数
					this.atlasTotal = res.data.total;

					// 页数大于1则追加
					if (this.atlasPage > 1) {
						if (res.data.list) {
							this.atlasList.push(...res.data.list);
						}
					} else {
						this.atlasList = res.data.list
					}
				})
			},
			// 更改图集
			changeTab(atlasId, atlasName) {
				this.isEmpty = false
				// 重置图集ID
				this.atlasId = atlasId
				// 重置图集名
				this.atlasName = atlasName
				// 重置页数
				this.resourcesPage = 1
				// 加载中状态
				this.status = "loading";
				// 重置资源列表
				this.resourcesList = [];
				// 重新获取图集资源列表
				this.getResourcesList(this.atlasId)
			},

			// 获取资源列表
			getResourcesList(atlasId) {
				let imgIds;
				if (this.initAtlasId == atlasId) {
					imgIds = this.imgIds
				} else {
					imgIds = ''
				}
				this.$u.api.atlas.getResourcesList({
					imgIds: imgIds,
					atlasId: atlasId,
					page: this.resourcesPage,
					size: this.resourcesSize
				}).then(res => {

					if (res.code != 200) {
						uni.showModal({
							title: '图片加载失败',
							content: '请刷新后重试或重启小程序',
							showCancel: false,
							confirmText: '知道了'
						})
						return;
					}

					// 资源列表总数
					this.resourcesTotal = res.data.total;

					// 页数大于1则追加
					if (this.resourcesPage > 1) {
						this.resourcesList.push(...res.data.list);
					} else {
						this.resourcesList = res.data.list
					}
					// 数据为空
					if (this.resourcesList.length == 0) {
						this.isEmpty = true
					}
					if (this.resourcesSize > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	.sp {
		margin-bottom: 15rpx;
		width: 219rpx;
		height: 433rpx;
	}

	.wrap {
		margin: 0 0 0 32rpx;



		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 42rpx;
		}

	}

	.waterfall {
		margin-right: 32rpx;
	}


	.data-list {
		width: 100%;
		white-space: nowrap;
		margin: 24rpx 0 10rpx 0;
	}

	.data-list-item {
		display: inline-block;
		margin-right: 24rpx;
		height: 210rpx;
		// background: orange;
		overflow: hidden;



		.imgCont {

			position: relative;

			.bgs {
				position: relative;

				.mask {
					background: rgba(255, 255, 255, 0.11);
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;

					width: 143rpx;
					height: 143rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 20rpx;
					overflow: hidden;

					.narrow {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						bottom: 0rpx;
						right: 0rpx;
						display: none;
					}

					.num {
						display: inline-flex;
						padding: 4rpx 12rpx;
						background: rgba(0, 0, 0, 0.40);
						border-radius: 33rpx;
						font-size: 20rpx;
						font-family: PingFang HK-Regular, PingFang HK;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.image {
				width: 143rpx;
				height: 143rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.image1 {
					width: 100%;
					height: 100%;
				}

				// border: 6rpx solid transparent !important;
			}

			.decoration {
				position: absolute;
				bottom: -14rpx;
				left: 8rpx;
				width: 127rpx;
				height: 14rpx;
			}
		}

		&.active {
			.narrow {
				display: block !important;
			}

			.decoration {

				margin: 0 auto 0;
			}

			.image {
				// background: rgba(255,255,255,0.11);
				// border-radius: 20px 20px 20px 20px;
				// opacity: 1;
				// border: 2px solid #FFFFFF;
				border: 6rpx solid #FFFFFF !important;
				box-shadow: 0px 0px 6px 0px #FFFFFF;

			}
		}


		.name {

			font-size: 25rpx;
			font-family: PingFang HK-Light, PingFang HK;
			font-weight: 300;
			color: #FFFFFF;
			margin-top: 25rpx;
			text-align: center;
			width: 73px;
			height: 35rpx;
			/* 不同浏览器有不同的前缀，比如-moz-box */
			display: -webkit-box;
			/* 子元素的排列方式：垂直排列 */
			-webkit-box-orient: vertical;
			/* 设置3行文本之后打点显示 */
			-webkit-line-clamp: 1;
			/* 超出盒子部分隐藏显示 */
			overflow: hidden;
		}
	}
</style>